<template>
  <div class="main_box">
    <CommonHeader title="请求支持信息"></CommonHeader>
    <div class="main_list">
        <pull-refresh-list
            ref="PullRefreshList"
            :limit="queryInfo.size"
            :page-no.sync="queryInfo.current"
            :data.sync="dataList"
            @getList="initData"
        >
        <div v-for="item in dataList" :key="item.index" class="quota_item" @click="toDetail(item)">
            <div class="head">
                <div class="left">陈允岳</div>
                <div class="right">查看全部 <i class="icon"></i></div>
            </div>
            <div class="title">
                <div class="left">“批而未供”土地消化</div>
                <div class="right">2022-07-28 18:18</div>
            </div>
            <div class="content">申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容。</div>
        </div>
        </pull-refresh-list>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader'
import PullRefreshList from '@/components/PullRefreshList'
export default {
  // eslint-disable-next-line
  name: 'HelpList',
  components: {
    CommonHeader,
    PullRefreshList
  },
  data(){
    return{
        queryInfo: {
            current: 1,
            size: 10
        },
        dataList: []
    }
  },
  created(){

  },
  methods: {
    onSearch() {
      this.$refs.PullRefreshList.onSearch()
    },
    initData(callback) {
      const params = {
          _gp: "declarationApp",
          _mt: "list",
          employeeId: sessionStorage.getItem('employId'),
          page: this.queryInfo.current,
          limit: this.queryInfo.size
      }
      this.$api.commonApi(params).then(res=>{
        if(res.errno === 200){
          const rows = res.data.items
          if (callback) callback(rows)
        }else{
           callback([])
        }
      })
    },
    toDetail(item){
        this.$router.push({
            path:'/helpDetail',
            query:{
                ...item
            }
        })
    }
  },
}
</script>

<style scoped>
.main_box{
    min-height: 100vh;
    background-color: #f4f5fa;
}
.main_list{
    width: 100%;
    padding:15px;
    box-sizing: border-box;
    text-align: left;
}
.quota_item{
    width: 100%;
    background-color: #fff;
    padding:10px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.quota_item .head{
    display: flex;
    justify-content: space-between;
    font-size:15px;
    color:#333;
    margin-bottom: 10px;
}
.quota_item .head .left{
    position: relative;
    padding-left:10px;
}
.quota_item .head .left::before{
    display: block;
    content:"";
    width: 4px;
    height: 15px;
    background-color: #367FFF;
    position: absolute;
    left:0;
    top:4px;
}
.quota_item .head .right{
    color:#367FFF;
    font-size:13px;
}
.quota_item .head .right i{
  display: inline-block;
  width: 8px;
  height: 12px;
  background: url("../../assets/image/blue_right.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  top:1px;
}
.quota_item .title{
    display: flex;
    justify-content: space-between;
    font-size:14px;
    color:#333;
    margin-bottom: 10px;
}
.quota_item .title .left{
    max-width: 200px;
}
.quota_item .title .right{
    color:#A3A7AD;
}
.quota_item .content{
    font-size:13px;
    color:#A3A7AD;
}
</style>